{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Automation</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/select_top.css' %}" type="text/css">

    <script type="text/javascript" src="{% static 'js/jquery-3.1.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-select.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.jeditable.js' %}"></script>
    <script language="javascript">
        function bigimg(i) {
            console.log(i.style.zoom);
            var zoom = parseInt(i.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12;
            if(zoom > 0) {
                i.style.zoom = zoom + '%';
                return false;
            }
        }      

        function restoreSize(i) {
            i.style.zoom = '80%';
            return false;
        }      
    </script>    
</head>

<body>
    <div id="left">
        <div id="topContainer">
            <img id="top" src="{% static 'images/full_top.jpg' %}" style="cursor:pointer; zoom:80%",
            onmousewheel="return bigimg(this)" ondblclick="return restoreSize(this)"/>
        </div>
    </div>

    <div id="right">
        <form action="{% url 'autocases:save_selected_top' %}" method="post" class="form-horizontal">
            <div class="form-group">
                <label for='topfile' class='col-sm-2 control-label'>top: </label>
                <!-- device select -->
                <div class="col-sm-4">
                    <select name="topfile" id="topfile" class="selectpicker" data-live-search="true">
                    </select>
                </div>
                <button type="submit" class="btn btn-default col-sm-1 control-label" style="text-align:center">提交</button>
                <p class='text-info col-sm-5 control-label'>
                    <a href="{% url 'autocases:create_top' %}">想新建一个Top吗, 点我呀!</a>
                </p>
            </div>   
        </form> 

        <div id="top_content">
            <pre></pre>
        </div>                   
    </div>

    <script>

        // 初始化select下拉框
        var tops = {{ tops|safe }};
        $("#topfile").empty()
        for(var i=0; i<tops.length; i++) {
            $("#topfile").append("<option value='" + tops[i] + "'>" + tops[i] + "</option>");
        }            

        $.ajax({
            type: "GET",
            url: "{% url 'autocases:get_top_content' %}" + "?topfile=" + tops[0],
            success: function(response) {
                $("#top_content>pre").html(response);
            }
        })
            

        $("#top_content>pre").editable("{% url 'autocases:save_modified_top' %}", {
            submitdata: function() {
                return {'topfile' : $("#topfile").val()};
            },
            type: 'textarea',
            submit : 'OK'
        })

        // 监听下拉框变化
        $(document).ready(function() {
            $("#topfile").change(function(){
                var topfile = $("#topfile").val();
                $.get("{% url 'autocases:get_top_content' %}" + "?topfile=" + topfile,
                    function(response, status, xhr) {
                        $("#top_content>pre").html(response);
                })
            })
        })
     
    </script>

</body>

</html>
